<template>
  <div class="search-table-page">
    <Row type="flex"
         justify="space-between"
         class="row-operation">
      <i-col span="18">
        <search-form :parentId="parentId"
                     @search="handleSearch"></search-form>
      </i-col>
      <i-col span="4"
             class="col-right">
        <add class="spteen"
             :nowGra="NowGra"
             @getList="getTableData"></add>
        <Button type="success"
                style="margin-left: 5px;"
                v-if="goAbled"
                @click="goBack">返回</Button>
        <!-- <Poptip confirm
              title="确定删除？"
              @on-ok="okdelete">
        <Button icon="md-trash"
                type="error">删除</Button>
      </Poptip> -->
      </i-col>
    </Row>
    <table-page :loading="loading"
                :columns1="columns1"
                :data1="tableData"
                :noData="noData"
                :currentPage="currentPage"
                :totalPage="totalPage"
                :pageSize="pageSize"
                @multi-select="multiSelect"
                @change-page="changePage"
                @change-page-size="changPageSize">
    </table-page>
    <edit ref="edit"
          @getList="getTableData"></edit>
  </div>
</template>

<script>
import add from './add/add'
import edit from './edit/edit'
import searchForm from './search-form/search-form'
import tablePage from '_c/table-page/table-page'
import { getGoodsClassList } from '@/api/goods'

export default {
  name: 'goods-classify',
  components: {
    add,
    edit,
    searchForm,
    tablePage
  },
  data () {
    return {
      exportLoading: false,
      loading: false,
      goAbled: false,
      parentId: '',
      columns1: [
        {
          title: '商品分类名称',
          key: 'ClassName'
        },
        {
          title: '分类规格',
          key: 'CommentLables'
        },
        {
          title: '当前分类层级',
          key: 'NowGra',
          render: (h, params) => {
            const row = params.row
            const text = row.NowGra === 1 ? '一级' : row.NowGra === 2 ? '二级' : row.NowGra === 3 ? '三级' : row.NowGra === 4 ? '四级' : '五级'
            return h('span', {}, text)
          }
        },
        {
          title: '推荐',
          key: 'RecIs',
          render: (h, params) => {
            const row = params.row
            const text = row.RecIs === 0 ? '不推荐' : row.RecIs === 1 ? '猜你喜欢' : '可能还喜欢'
            return h('span', {}, text)
          }
        },
        {
          title: '操作',
          key: 'handle',
          width: 150,
          align: 'center',
          render: (h, params) => {
            if (params.row.NowGra !== 3) {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$refs.edit.getItem(params.row.AutoId)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    'marginLeft': '5px'
                  },
                  on: {
                    click: () => {
                      const id = params.row.AutoId
                      const nowGra = params.row.NowGra + 1
                      const route = {
                        path: 'goods_classify',
                        query: { id, nowGra }
                      }
                      this.$router.push(route)
                    }
                  }
                }, '下级分类')
              ])
            } else {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$refs.edit.getItem(params.row.AutoId)
                    }
                  }
                }, '编辑')
              ])
            }
          }
        }
      ],
      noData: '暂无数据',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
      selectedIds: [],
      searchData: {
        'PageIndex': '1',
        'PageSize': '10',
        'Search': []
      },
      NowGra: 1
    }
  },
  mounted () {
    this.init()
    if (this.$route.query.id) this.goAbled = true
    this.getTableData()
  },
  beforeRouteUpdate (to, from, next) {
    // 是否显示“返回”按钮
    if (to.query.id) {
      this.parentId = to.query.id
      this.searchData = {
        'PageIndex': '1',
        'PageSize': '10',
        'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: to.query.id }]
      }
      this.goAbled = true
      this.getTableData()
    } else {
      this.parentId = ''
      this.searchData = {
        'PageIndex': '1',
        'PageSize': '10',
        'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: '' }]
      }
      this.goAbled = false
      this.getTableData()
    }
    if (to.query.nowGra) this.NowGra = Number(to.query.nowGra)
    else this.NowGra = 1
    next()
  },
  methods: {
    init () {
      const parentId = this.$route.query.id
      this.searchData = {
        'PageIndex': '1',
        'PageSize': '10',
        'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: parentId || '' }]
      }
    },
    // 获取表格数据信息
    getTableData (parameter) {
      this.loading = true
      parameter = this.searchData
      getGoodsClassList(parameter).then(res => {
        if (res.data.success) {
          this.totalPage = res.data.data.TotalCount
          this.currentPage = res.data.data.CurrentPageIndex
          this.tableData = res.data.data.aaData
          this.loading = false
        } else {
          this.$Message.info(res.data.msg || '缺少必要参数！')
          this.loading = true
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 页码切换
    changePage (page) {
      this.currentPage = page
      this.searchData.PageIndex = page
      this.getTableData()
    },
    // 切换每页显示多少条数据
    changPageSize (pageSize) {
      this.init()
      this.pageSize = pageSize
      this.searchData.PageSize = pageSize
      this.getTableData()
    },
    handleSearch (searchContent) {
      this.searchData.Search = searchContent
      this.getTableData(this.searchData)
    },
    // 多选
    multiSelect (selection) {
      this.selectedIds = selection.map(item => item.Id)
    },
    okdelete () {
      if (this.selectedIds.length === 0) {
        this.$Message.info('请选择要删除的用户！')
      } else {
        const delData = {
          SysUserId: localStorage.getItem('userId'),
          Ids: this.selectedIds
        }
        delSystemUser(delData).then(res => {
          if (res.data.success) {
            this.$Message.info(res.data.msg)
          } else {
            this.$Message.info(res.data.msg)
          }
        }).then(() => {
          this.getTableData()
        })
      }
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.search-table-page {
  padding: 20px;
  min-height: 85vh;
  background-color: #fff;
  .row-operation {
    margin-bottom: 20px;
    .col-right {
      text-align: right;
      .spteen {
        margin-left: 5px;
      }
    }
  }
}
</style>
